<template>
  <page-wrap
    :show-top="showTop"
    hide-tab
    bg-color="#75DFFA"
    back
    title="进度排行榜"
  >
    <view class="rankingWrap" :style="'padding-top:' + navHeight + 'px'">
      <view class="myInfo">
        <view class="myAvatar">
          <img :src="userInfo.pic || defaultAvatar" alt="" />
        </view>
        <view class="myName">
          {{ myRankInfo.personName || '' }}
        </view>
        <view class="myPosition">
          今日排名
          <span>{{ myRankInfo.rank || '暂无' }}</span>
          <img :src="trendIcon" alt="" class="myTrend" />
        </view>
      </view>
      <view :class="{ topPlayers: true, isIos: isIOS }">
        <view
          class="topPlayerItem"
          v-for="(item, index) in topPlayersList"
          :key="index"
        >
          <view class="topPlayerName">{{ item.personName }}</view>
          <img class="topPlayerAvatar" :src="item.personPhoto" />
        </view>
      </view>
      <view class="doneTips" v-if="doneTipsInnerList.length">
        <img class="doneTipsIcon" :src="doneTipsIcon" />
        <view
          class="doneTipsDisplay"
          :style="{ transform: `translateY(${doneTipsSlideDistance}rpx)` }"
        >
          <view
            class="doneTipsInner"
            v-for="(item, index) in doneTipsInnerList"
            :key="index"
            @click="handleRightNameClick(item)"
          >
            <view class="innerItem">
              <text class="tipsName">{{ item.personName }} 完成了</text>
              <text class="tipsProject">{{ item.rightName }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="rankingList">
        <template v-if="rankingList.length">
          <view
            class="rankingItem"
            v-for="(item, index) in rankingList"
            :key="index"
          >
            <span class="rankingIndex">{{ index + 4 }}</span>
            <img
              class="rankingAvatar"
              :src="item.personPhoto || defaultAvatar"
            />
            <span class="rankingName">{{ item.personName }}</span>
          </view>
        </template>
        <view class="emptyTips" v-else>
          <Empty text="暂无其他排名"></Empty>
        </view>
      </view>
      <u-loadmore :status="status" v-if="rankingList.length >= 7" />
    </view>
  </page-wrap>
</template>

<script>
import {
  getRankingList,
  getOtherRecordList,
  getMyRankingInfo,
  rightsTree,
  ztBurryPoint,
  getPersonRightNum
} from '@/api/modules/career.js';
import { env } from '@/api/root';
import common from '@/api/common.js';
import Empty from '@/components/Empty';
import { getPersonDetail } from '@/api/index';
import { set } from 'vue';
export default {
  name: 'rankingList',
  components: {
    Empty
  },
  data() {
    return {
      showTop: false,
      status: 'loadmore',
      uNavColor: '#FFF',
      navHeight: getApp().globalData.navHeight,
      defaultAvatar: this.$imgBase + 'common/avatar_default.png',
      trendIcon: '',
      goingUp: this.$imgBase + 'careerPath/goingUp.svg',
      goingDown: this.$imgBase + 'careerPath/goingDown.svg?v=1',
      doneTipsIcon: this.$imgBase + 'careerPath/doneTipsIcon.svg',
      topPlayersList: [],
      doneTipsInnerList: [],
      rankingList: [],
      doneTipsSlideDistance: 0,
      doneTipsSlideTimer: null,
      pageSize: 20,
      pageNo: 1,
      myRankInfo: {},
      personId: uni.getStorageSync('person-id').slice(2),
      cardType: '',
      rightsList: [],
      isIOS: uni.getSystemInfoSync().platform == 'ios',
      doneTipsSingleScrollDistance: 36, //默认36但是ios的时候36会导致位移
      userInfo: {},
      assessmentVersion: uni.getStorageSync('assessmentVersion'),
      count: 0,
      productSign: ''
    };
  },
  onLoad(opt) {
    this.productSign = opt.productSign || '';
    this.cardType = Number(opt.cardType) || '';
    this.reqGetRankingList();
    this.reqGetdoneTipsInnerList();
    this.reqGetMyRankingInfo();
    this.getPersonDetail();
    this.rightsTreeFn();
    if (this.isIOS) {
      this.doneTipsSingleScrollDistance = 34;
    }
  },
  methods: {
    reqZtBurryPoint(rightItem) {
      const params = {
        rightId: rightItem.rightId,
        cardType: this.myRankInfo.cardType,
        personId: this.personId,
        description: `${this.personId}点击了${rightItem.rightName}`
      };
      ztBurryPoint(params)
        .then((res) => {
          if (res.code == 200) {
            console.log(`${this.personId}点击了${rightItem.rightName}`);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getPersonDetail(update) {
      if (
        !getApp().globalData.userInfo ||
        !getApp().globalData.userInfo.id ||
        update
      ) {
        let param = {
          param: JSON.stringify({
            personId: this.personId
          }),
          where: '',
          slaveInfo: 1
        };
        getPersonDetail(param).then((res) => {
          this.userInfo = res.data || res;
          if (
            this.userInfo.pic &&
            this.userInfo.pic.indexOf('img.job1001.com/myUpload/pic.gif') >= 0
          ) {
            this.userInfo.pic = this.$defalutAvatar;
          }
          getApp().globalData.userInfo = this.userInfo;
        });
      } else {
        this.userInfo = getApp().globalData.userInfo;
      }
    },
    async getPersonRightNumFn(rightId) {
      const params = {
        personId: this.personId || undefined,
        rightId,
        cardType: this.cardType
      };
      const res = await getPersonRightNum(params);
      return res.data.ownNum - res.data.useNum;
    },
    async handleRightNameClick(clickedItem) {
      console.log('clickedItem', clickedItem);
      const item = this.rightsList.find(
        (val) => val.rightId == clickedItem.rightId
      );
      console.log('item', item);
      //先判断自己是否有这个权益
      if (!item) {
        uni.showToast({
          icon: 'none',
          title: '您还没有购买该权益',
          duration: 1000
        });
        return;
      }
      // 分未只有一级权益和二级权益
      // 这里是一级权益的处理情况
      if (item.children.length < 2) {
        //未购买
        const childItem = item.children[0];
        if (childItem.rightStatus == 4) {
          let rightId = childItem.rightId;
          if (this.productSign == 'ZHITU_TOC_SERVICE' && rightId == 9) {
            uni.navigateTo({
              url: `/pagesSub/careerNew/selectCareerReport/index?rightId=${rightId}&rightCount=${
                childItem && childItem.rightCount
              }`
            });
            return;
          }
          uni.navigateTo({
            url: `/pagesSub/careerNew/zhituPaytoC/index?rightId=${rightId}&cardType=${
              this.myRankInfo.cardType || '-1'
            }`
          });
          return;
        }

        // 同一处理还没开放的情况
        if (item.children[0].rightStatus == 0) {
          uni.showToast({
            icon: 'none',
            title: '敬请期待！',
            duration: 1000
          });
          return;
        }
        if (item.children[0].rightStatus == 3) {
          uni.showToast({
            icon: 'none',
            title: '您的职途卡已过期！',
            duration: 2000
          });
          return;
        }
        // 性格测评
        if (item.rightId == 14) {
          const discLeftUseNum = await this.getPersonRightNumFn(1); // 性格测评的内层rightId是1
          if (item.children[0].rightStatus == 1) {
            const { personId, personName } = this.userInfo;
            let url;
            if (env == 'test') {
              url = `https://3gtest.crm1001.com/disc/#/disc/question?personId=${personId}&iname=${personName}&phone=18825449087&from=careerPathResult&discLeftUseNum=${discLeftUseNum}&cardType=${this.cardType}`;
            } else if (env == 'pro' || env == 'pre') {
              url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${personId}&iname=${personName}&phone=18825449087&from=careerPathResult&discLeftUseNum=${discLeftUseNum}&cardType=${this.cardType}`;
            }
            uni.navigateTo({
              url:
                '/pagesSub/public/web/descWebView?link=' +
                encodeURIComponent(url)
            });
          }
          if (
            (item.children[0].rightStatus == 2 ||
              item.children[0].rightStatus == 3) &&
            item.children[0].extra &&
            item.children[0].extra.userId
          ) {
            const userId = item.children[0].extra.userId;
            const { personName } = this.myRankInfo;
            let url;
            if (env == 'test') {
              url = `https://3gtest.crm1001.com/disc/#/disc/result?userId=${userId}&peronsId=${this.personId}&iname=${personName}&phone=18825449087&from=careerPathResult&discLeftUseNum=${discLeftUseNum}&cardType=${this.cardType}`;
            } else if (env == 'pro' || env == 'pre') {
              url = `https://3g.crm1001.com/v2/disc/#/disc/result?userId=${userId}&peronsId=${this.personId}&iname=${personName}&phone=18825449087&from=careerPathResult&discLeftUseNum=${discLeftUseNum}&cardType=${this.cardType}`;
            }
            uni.navigateTo({
              url:
                '/pagesSub/public/web/descWebView?link=' +
                encodeURIComponent(url)
            });
          }
        }
        // 职业测评
        if (item.rightId == 10) {
          this.reqZtBurryPoint(item.children[0]);
          let url = '';
          url = `/pagesSub/careerAssessResultActNew/index?&personId=${this.personId}`;
          // if (!this.assessmentVersion || this.assessmentVersion == '1') {
          //   url = `/pagesSub/career/activity/CareerAssessResultAct?&personId=${this.personId}`;
          // } else if (this.assessmentVersion == '2') {
          //   url = `/pagesSub/careerAssessResultActNew/index?&personId=${this.personId}`;
          // }
          if (item.children[0].rightStatus == 1) {
            if (item.rightStatus == 1) {
              uni.navigateTo({
                url: `/pagesSub/career/activity/vocationalAssessment?fromWhere=careerPath&personId=${this.personId}`
              });
            } else {
              uni.navigateTo({
                url: url
              });
            }
          } else {
            uni.navigateTo({
              url: url
            });
          }
        }
        // 职业报告
        if (item.rightId == 12) {
          this.reqZtBurryPoint(item.children[0]);
          if (this.productSign == 'ZHITU_TOC_SERVICE') {
            uni.navigateTo({
              url: `/pagesSub/careerNew/selectCareerReport/index?rightId=${
                item.children[0].rightId
              }&rightCount=${item.children[0] && item.children[0].rightCount}`
            });
          } else if (item.children[0].rightStatus == 4) {
            uni.navigateTo({
              url: `/pagesSub/careerNew/zhituPaytoC/index?rightId=${9}&cardType=${
                this.info.cardType || '-1'
              }`
            });
          } else {
            uni.navigateTo({
              url: `/pagesSub/careerNew/selectCareerReport/index?rightId=${
                item.children[0].rightId
              }&rightCount=${item.children[0] && item.children[0].rightCount}`
            });
          }
        }
        //AI面试
        if (item.rightId == 16) {
          let child = item.children[0];
          const queryParams = {
            userNum: child.userNum || 0,
            rightCount: child.rightCount || 3
          };
          const queryString = common.serializeQueryParams(queryParams);
          uni.navigateTo({
            url: `/pagesSub/companyCenter/interviewAI/majorSearchAI${queryString}`
          });
        }
      }
      if (item.children.length >= 2) {
        const childItem = item.children.find(
          (_item) => _item.rightId == clickedItem.secondRightId
        );
        if (!childItem) return;
        this.reqZtBurryPoint(childItem);
        // 职业测评
        if (childItem.rightId == 2) {
          if (childItem.rightStatus == 1) {
            uni.navigateTo({
              url: `/pagesSub/career/activity/vocationalAssessment?personId=${this.personId}`
            });
          } else {
            uni.navigateTo({
              url: `/pagesSub/careerAssessResultActNew/index?personId=${this.personId}&assessmentType=0`
            });
            // if (!this.assessmentVersion || this.assessmentVersion == '1') {
            //   uni.navigateTo({
            //     url: `/pagesSub/career/activity/CareerAssessResultAct?personId=${this.personId}`
            //   });
            // } else if (this.assessmentVersion == '2') {
            //   uni.navigateTo({
            //     url: `/pagesSub/careerAssessResultActNew/index?personId=${this.personId}&assessmentType=0`
            //   });
            // }
          }
        }
        // 职业报告
        if (childItem.rightId == 12) {
          if (this.productSign == 'ZHITU_TOC_SERVICE') {
            uni.navigateTo({
              url: `/pagesSub/careerNew/selectCareerReport/index?rightId=${
                item.children[0].rightId
              }&rightCount=${item.children[0] && item.children[0].rightCount}`
            });
          } else if (item.children[0].rightStatus == 4) {
            uni.navigateTo({
              url: `/pagesSub/careerNew/zhituPaytoC/index?rightId=${9}&cardType=${
                this.info.cardType || '-1'
              }`
            });
          } else {
            uni.navigateTo({
              url: `/pagesSub/careerNew/selectCareerReport/index?rightId=${
                item.children[0].rightId
              }&rightCount=${item.children[0] && item.children[0].rightCount}`
            });
          }
        }
        // 完善简历
        if (childItem.rightId == 3) {
          // 有没有使用过都是跳到完善建立页面
          uni.navigateTo({
            url: '/pagesSub/newResume/index'
          });
        }
        //简历诊断
        if (childItem.rightId == 4) {
          //未使用
          if (childItem.rightStatus == 1) {
            uni.navigateTo({
              url: '/pagesSub/AIResumeDiagnoseNew/index'
            });
            //已使用
          } else if (childItem.rightStatus == 2) {
            uni.navigateTo({
              url: `/pagesSub/newResume/resumeAssessment/index?target=AIResumeDiagnoseNew`
            });
          }
        }
      }
    },
    rightsTreeFn() {
      // 这个uid只是作为占位，但是不能删除。
      rightsTree({ uid: '' }).then((res) => {
        if (res.code == 200) {
          this.rightsList = res.data;
        }
      });
    },
    reqGetRankingList() {
      const params = {
        cardType: this.cardType || 6,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        personId: this.personId
      };
      getRankingList(params)
        .then((res) => {
          if (res.code == 200) {
            if (this.topPlayersList.length == 0) {
              this.topPlayersList = res.data.splice(0, 3);
              this.rankingList = this.rankingList.concat(res.data);
            } else {
              this.rankingList = this.rankingList.concat(res.data);
            }
            if (
              this.topPlayersList.length + this.rankingList.length >=
              res.pageparam.sums
            ) {
              this.status = 'nomore';
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    reqGetdoneTipsInnerList() {
      const params = {
        cardType: this.cardType || 6,
        pageNo: this.pageNo,
        pageSize: 8,
        personId: this.personId
      };
      getOtherRecordList(params)
        .then((res) => {
          if (res.code == 200) {
            this.doneTipsInnerList = res.data;
            if (res.data.length) {
              this.startDoneTipsScroll();
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    reqGetMyRankingInfo() {
      const params = {
        cardType: this.cardType || 6,
        personId: this.personId
      };
      getMyRankingInfo(params)
        .then((res) => {
          if (res.code == 200) {
            this.myRankInfo = res.data;
            //10没变，20上升，30下降
            if (res.data.rankingTrends == 20) {
              this.trendIcon = this.goingUp;
            } else if (res.data.rankingTrends == 30) {
              this.trendIcon = this.goingDown;
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    startDoneTipsScroll() {
      this.doneTipsSlideTimer = setInterval(() => {
        if (this.count < this.doneTipsInnerList.length - 1) {
          this.count++;
          this.doneTipsSlideDistance = this.doneTipsSlideDistance - 98;
        } else {
          this.count = 0;
          this.doneTipsSlideDistance = 0;
        }
      }, 4700);
    }
  },

  beforeDestroy() {
    clearInterval(this.doneTipsSlideTimer);
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
  },
  onReachBottom() {
    if (this.status == 'nomore' || !this.rankingList.length) return;
    this.status = 'loading';
    this.pageNo += 1;
    this.reqGetRankingList();
  }
};
</script>

<style lang="scss" scoped>
.rankingWrap {
  width: 100vw;
  min-height: 100vh;
  background-image: url($img-base + 'careerPath/rankingListBG.png?v=2');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #fff5ea;
  .myInfo {
    display: flex;
    align-items: center;
    margin-top: 36rpx;
    padding-left: 58rpx;
    .myAvatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      border: 3rpx solid white;
      margin-right: 12rpx;
      & > img {
        width: 58rpx;
        height: 58rpx;
        border-radius: 50%;
      }
    }
    .myName {
      max-width: 340rpx;
      word-break: break-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 44rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      color: #005979;
      line-height: 60rpx;
      margin-right: 28rpx;
    }
    .myPosition {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      color: #006488;
      // line-height: 40rpx;
      & > span {
        color: #006488;
        font-weight: bold;
        font-size: 44rpx;
        margin-right: 4rpx;
        margin-left: 4rpx;
      }
      .myTrend {
        width: 28rpx;
        height: 28rpx;
      }
    }
  }
  .topPlayers {
    position: relative;
    width: 100vw;
    height: 594rpx;
    &.isIos {
      &:nth-of-type(1) {
        bottom: 20rpx;
      }
      &:nth-of-type(2) {
        bottom: 60rpx;
      }
      &:nth-of-type(3) {
        bottom: -40rpx;
      }
    }
    .topPlayerItem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .topPlayerName {
        width: 212rpx;
        max-width: 212rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        color: #0084b1;
        line-height: 42rpx;
        margin-bottom: 16rpx;
        text-align: center;
      }
      &:nth-of-type(1) {
        position: absolute;
        bottom: 310rpx;
        left: 324rpx;
        .topPlayerAvatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
      }
      &:nth-of-type(2) {
        position: absolute;
        bottom: 250rpx;
        left: 111rpx;
        .topPlayerAvatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }
      &:nth-of-type(3) {
        position: absolute;
        bottom: 150rpx;
        right: 45rpx;
        .topPlayerAvatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }
    }
  }
  .doneTips {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 68rpx;
    height: 98rpx;
    line-height: 98rpx;
    background: linear-gradient(85deg, #f5f9f8 0%, #e9f8fb 100%);
    border-radius: 20rpx;
    border-image: linear-gradient(
        150deg,
        rgba(255, 255, 255, 1),
        rgba(205, 236, 244, 1)
      )
      2 2;
    backdrop-filter: blur(11px);
    overflow: hidden;
    .doneTipsIcon {
      padding: 0 14rpx 0 30rpx;
      width: 40rpx;
      height: 40rpx;
    }
    .doneTipsDisplay {
      height: 98rpx;
      width: 100%;
      transition: all 1s ease;
      .doneTipsInner {
        height: 98rpx;
        width: 100%;
        display: flex;
        .innerItem {
          height: 98rpx;
          font-size: 26rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #429ec3;
          .tipsName {
            margin-right: 20rpx;
          }
          .tipsProject {
            color: #ff8d42;
          }
        }
      }
    }
  }
  .rankingList {
    margin: 0 68rpx;
    background: linear-gradient(2deg, #fffbf5 0%, #ebf9fb 100%);
    border-radius: 20rpx;
    border-image: linear-gradient(
        217deg,
        rgba(205, 236, 244, 1),
        rgba(255, 255, 255, 1)
      )
      1 1;
    backdrop-filter: blur(5px);
    margin-top: 16rpx;
    padding: 44rpx 46rpx;
    border-radius: 20rpx;
    .rankingItem {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      color: #2082b3;
      line-height: 40rpx;
      margin-bottom: 40rpx;

      .rankingIndex {
        margin-right: 42rpx;
      }
      .rankingAvatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }
      .rankingName {
      }
    }
    .emptyTips {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      color: #2082b3;
      line-height: 40rpx;
      margin-bottom: 40rpx;
    }
  }
}
::v-deep .empty-title {
  margin: 0 auto;
  text {
    color: #dfdfdf !important;
    font-size: 24rpx !important;
  }
}
</style>
